<template>
    <div>
        <el-button-group>
            <el-button @click="on"><i class="fa fa-camera"></i> 启动摄像头</el-button>
            <el-button @click="off">关闭摄像头</el-button>
            <!-- <el-button @click="takePhoto">拍照</el-button> -->
        </el-button-group>
        <div class="camera_photo">
            <div class="camera">
                <div id="my_camera"></div>
                <div class="takePhoto">
                    <el-tooltip content="拍照" placement="top">
                        <a @click="takePhoto" class="fa fa-circle-thin"></a>
                    </el-tooltip>
                </div>
            </div>
            <img v-if="imageUrl" :src="imageUrl" class="img_person">
        </div>
    </div>
</template>

<script>
import Webcam from 'webcamjs/webcam.min.js';
import swf from 'webcamjs/webcam.swf';
// import Webcam from '../assets/js/webcam.js';
export default {
    data() {
        return {
            imageUrl:'',
            imageBlob:null
        };
    },
    mounted(){
        console.log(Webcam,'test')
        Webcam.set({
            width: 320,
            height: 240,
            // device capture size
			dest_width: 320,
			dest_height: 240,
			
			// final cropped size
			crop_width: 240,
            crop_height: 240,
            force_flash: false,
            enable_flash: true,
            image_format: 'jpeg',
            swfURL:swf,
            jpeg_quality: 90
        });
    },
    methods: {
        off(){
            Webcam.reset();
            if(!('mediaDevices' in navigator)){
                Webcam.attach( '#my_camera' );
            }
        },
        on(){
            Webcam.attach( '#my_camera' );
        },
        takePhoto(){
            // take snapshot and get image data
            var that = this;
			Webcam.snap( function(data_uri, canvas, context) {
                that.imageUrl = data_uri;
                var binStr = atob( data_uri.split(',')[1] ),
                    len = binStr.length,
                    arr = new Uint8Array(len);
                for (var i=0; i<len; i++ ) {
                    arr[i] = binStr.charCodeAt(i);
                }
                that.imageBlob = new Blob( [arr], {type: 'image/jpeg' } );
                // that.imageBlob = canvas.toBlob('image/jpeg');
            } );
        },
        clear(){
            if(this.imageUrl){
                this.imageUrl = '';
                this.imageBlob = null;
                this.off();
            }
        }
    }
}
</script>

<style scoped>
    .camera_photo{
        display: flex;
        justify-content: space-between;
        width: 500px;
        margin-top: 10px;
    }
    .camera{
        height: 285px;
        width: 240px;
    }
    #my_camera,#video{
        background: rgba(2, 11, 20, 0.94);
        height: 240px;
        width: 240px;
    }
    .takePhoto{
        height: 45px;
        background: black;
        font-size: 30px;
        text-align: center
    }
    .takePhoto a{
        color: #fff;
        cursor:pointer;
    }
    .img_person{
        width: 240px;
        border: 22px solid black;
        border-right:none;
        border-left:none; 
    }
</style>